/*--------------------- Typography ----------------------------*/

@font-face
{
    font-family: 'aller-light';
    src: url('public/fonts/aller-light.eot');
    src: url('public/fonts/aller-light.eot?#iefix') format('embedded-opentype'), url('public/fonts/aller-light.woff') format('woff'), url('public/fonts/aller-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'aller-bold';
    src: url('public/fonts/aller-bold.eot');
    src: url('public/fonts/aller-bold.eot?#iefix') format('embedded-opentype'), url('public/fonts/aller-bold.woff') format('woff'), url('public/fonts/aller-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'novecento-bold';
    src: url('public/fonts/novecento-bold.eot');
    src: url('public/fonts/novecento-bold.eot?#iefix') format('embedded-opentype'), url('public/fonts/novecento-bold.woff') format('woff'), url('public/fonts/novecento-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'fleurons';
    src: url('public/fonts/fleurons.eot');
    src: url('public/fonts/fleurons.eot?#iefix') format('embedded-opentype'), url('public/fonts/fleurons.woff') format('woff'), url('public/fonts/fleurons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/*--------------------- Base Styles ----------------------------*/

body
{
    font-family: "aller-light";
    background: url('public/images/gray.png') #fff;
    background-size: 322px;
    margin: 0;
}

hr
{
    height: 1px;
    background: #ddd;
    border: 0;
}

h1, h2, h3, h4, h5, h6
{
    color: #112233;
    font-weight: normal;
    font-family: "novecento-bold";
    text-transform: uppercase;
    line-height: 1em;
    margin-top: 50px;
}

h1
{
    margin: 0;
    text-align: center;
}

h2
{
    font-size: 1.3em;
}

h1:after
{
    content: "8";
    display: block;
    font-family: "fleurons";
    color: #999;
    font-size: 80px;
    padding: 10px 0 25px;
}

a
{
    color: #000;
}

b, strong
{
    font-weight: normal;
    font-family: "aller-bold";
}

blockquote
{
    border-left: 5px solid #ccc;
    margin-left: 0;
    padding: 1px 0 1px 1em;
}

.page blockquote p
{
    font-family: Menlo, Consolas, Monaco, monospace;
    font-size: 14px;
    line-height: 19px;
    color: #999;
    margin: 10px 0 0;
    white-space: pre-wrap;
}

pre, tt, code
{
    font-family: Menlo, Consolas, Monaco, monospace;
    font-size: 12px;
    display: inline-block;
    border: 1px solid #EAEAEA;
    background: #f8f8f8;
    color: #555;
    padding: 0 5px;
    line-height: 20px;
}

.page pre
{
    display: block;
    margin: auto;
    padding: 10px 15px;
    background: #fcfcfc;
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
}

.page pre code
{
    border: 0;
    padding: 0;
    background: transparent;
}

.fleur
{
    font-family: "fleurons";
    font-size: 100px;
    text-align: center;
    margin: 40px 0;
    color: #ccc;
}

/*--------------------- Layout ----------------------------*/

.container
{
    max-width: 1000px;
    margin: 0 auto;
    background: #fff;
    background: rgba(255, 255, 255, 0.4);
    overflow: hidden;
}

.page
{
    min-width: 900px;
    padding: 30px;
    margin: 30px;
    background: #fff;
    font-size: 17px;
    line-height: 26px;
}

.page p
{
    color: #30404f;
    margin: 26px 0;
}

ul.sections
{
    list-style: none;
    padding: 0 0 5px 0;;
    margin: 0;
}

.page li p
{
    margin: 12px 0;
}

.toc
{
    max-height: 0;
    overflow: hidden;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    -moz-transition: max-height 1s;
    -webkit-transition: max-height 1s;
    transition: max-height 1s;
}

.header:hover .toc
{
    max-height: 1600px;
}

.toc h3
{
    margin-top: 20px;
}

.toc ol
{
    clear: none;
    margin: 0 0 20px 0;
    display: inline-block;
    text-align: left;
    list-style-type: upper-roman;
    padding-left: 30px;
}

.toc li
{
    clear: none;
    display: inline-block;
    font-family: 'novecento-bold';
    width: 33%;
}

.toc li a
{
    font-family: 'aller-light';
}

/*---------------------- Syntax Highlighting -----------------------------*/

td.linenos
{
    background-color: #f0f0f0;
    padding-right: 10px;
}

span.lineno
{
    background-color: #f0f0f0;
    padding: 0 5px 0 5px;
}

/*

github.com style (c) Vasily Polovnyov <vast@whiteants.net>

*/

pre code
{
    display: block;
    padding: 0.5em;
    color: #000;
    background: #f8f8ff
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .javadoc
{
    color: #408080;
    font-style: italic
}

pre .keyword,
pre .assignment,
pre .literal,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .lisp .title,
pre .subst
{
    color: #954121;
    /*font-weight: bold*/
}

pre .number,
pre .hexcolor
{
    color: #40a070
}

pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula
{
    color: #219161;
}

pre .title,
pre .id
{
    color: #19469D;
}

pre .params
{
    color: #00F;
}

pre .javascript .title,
pre .lisp .title,
pre .subst
{
    font-weight: normal
}

pre .class .title,
pre .haskell .label,
pre .tex .command
{
    color: #458;
    font-weight: bold
}

pre .tag,
pre .tag .title,
pre .rules .property,
pre .django .tag .keyword
{
    color: #000080;
    font-weight: normal
}

pre .attribute,
pre .variable,
pre .instancevar,
pre .lisp .body
{
    color: #008080
}

pre .regexp
{
    color: #B68
}

pre .class
{
    color: #458;
    font-weight: bold
}

pre .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .lisp .keyword,
pre .tex .special,
pre .input_number
{
    color: #990073
}

pre .builtin,
pre .constructor,
pre .built_in,
pre .lisp .title
{
    color: #0086b3
}

pre .preprocessor,
pre .pi,
pre .doctype,
pre .shebang,
pre .cdata
{
    color: #999;
    font-weight: bold
}

pre .deletion
{
    background: #fdd
}

pre .addition
{
    background: #dfd
}

pre .diff .change
{
    background: #0086b3
}

pre .chunk
{
    color: #aaa
}

pre .tex .formula
{
    opacity: 0.5;
}
